<template>
  <div class="RecruitStudents">
    <div class="Situation">
      <h3>
<<<<<<< HEAD
        <div></div>历年录取记录情况
=======
        <div></div>历年招生记录情况
>>>>>>> 314b442cce11d658746227581b0160373004c345
      </h3>
      <!-- <div class="Situations">
        <div class="Situation_left">
          <div class="img">
            <img src="@/assets/img/yezi.png" alt />
          </div>

          <div class="datas">
            <h3>2018年招生计划</h3>
            <P>
              计划本科第一批招生
              <span>10</span>人
            </P>
            <P>
              计划专科第一批招生
              <span>10</span>人
            </P>
          </div>
        </div>
        <div class="Situation_right">
          <div class="img">
            <img src="@/assets/img/data.png" alt />
          </div>
          <div class="datas">
            <h3>2018年录取情况</h3>
            <P>
              本科第一批最低分
              <span>667</span>人
            </P>
            <P>
              本科第一批最低分
              <span>667</span>人
            </P>
            <P>
              本科第一批最低分
              <span>667</span>人
            </P>
          </div>
        </div>
      </div>-->
      <div class="school_tableData">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="year" label="年份" width="100"></el-table-column>
          <el-table-column prop="batch" label="批次" width="100"></el-table-column>
          <el-table-column prop="maxScore" label="最高分" width="100"></el-table-column>
          <el-table-column prop="average" label="平均分" width="100"></el-table-column>
          <el-table-column prop="minScore" label="最低分" width="100"></el-table-column>
          <el-table-column prop="minRanking" label="最低位次" width="120"></el-table-column>
          <el-table-column prop="admissionNum" label="录取人数"></el-table-column>
        </el-table>
      </div>
    </div>
    <!-- <div class="SituationDatas">
      <h3>
        <div></div>历年录取数据
      </h3>
      <div class="Datas_Situation">
        <el-dropdown split-button type="primary" @command="handleDatch">
          {{batch === "1" ? "本科一批" : primary === "2" ? "本科二批" : '本科三批'}}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">本科一批</el-dropdown-item>
            <el-dropdown-item command="2">本科二批</el-dropdown-item>
            <el-dropdown-item command="3">本科三批</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown split-button type="primary">
          录取人数
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown split-button type="primary" @command="handleSytle">
          {{sytle == 0 ? "理科" : "文科"}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="0">理科</el-dropdown-item>
            <el-dropdown-item command="1">文科</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="Datas">
        <h3>录取人数</h3>
        <h4>人数</h4>
        <div class="Datas_Deatil">
          <div class="year_14 year">
            <span>2356人</span>
            <p>2014</p>
          </div>
          <div class="year_15 year">
            <span>2356人</span>
            <p>2014</p>
          </div>
          <div class="year_16 year">
            <span>2356人</span>
            <p>2014</p>
          </div>
          <div class="year_17 year">
            <span>2356人</span>
            <p>2014</p>
          </div>
          <div class="year_18 year">
            <span>2356人</span>
            <p>2014</p>
          </div>
        </div>
      </div>
    </div>-->
    <div class="MajorSituation">
      <h3>
        <div></div>历年专业录取情况
      </h3>
<<<<<<< HEAD
      <!-- <div class="Datas_Situation">
        <el-dropdown split-button type="primary" @command="handleDatch">
         
=======
      <div class="Datas_Situation">
        <el-dropdown split-button type="primary" @command="handleDatch">
          <!-- {{batch === "1" ? "本科一批" : primary === "2" ? "本科二批" : '本科三批'}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
>>>>>>> 314b442cce11d658746227581b0160373004c345
          本科批
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="0">本科批</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown split-button type="primary" @command="handleYear">
          录取最低分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="2018">2018</el-dropdown-item>
            <el-dropdown-item command="2017">2017</el-dropdown-item>
            <el-dropdown-item command="2016">2016</el-dropdown-item>
            <el-dropdown-item command="2015">2015</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown split-button type="primary" @command="handleDatch">
<<<<<<< HEAD
         
=======
          <!-- {{sytle == 0 ? "理科" : "文科"}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
          理科
>>>>>>> 314b442cce11d658746227581b0160373004c345
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="0">理科</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
<<<<<<< HEAD
      </div>-->
=======
      </div>
>>>>>>> 314b442cce11d658746227581b0160373004c345
      <div class="Majorlist">
        <div class="list" v-for="(tiem ,index) in majorList.list" :key="tiem.majorId+index">
          <h3>
            <span>{{tiem.category}}</span>
          </h3>
          <ul>
            <li>
              {{tiem.year}}年录取最低分
              <span>{{tiem.minScore}}</span>
            </li>
            <li>
              {{tiem.year}}年录取最低排名
              <span>{{tiem.minRanking}}</span>
            </li>
            <li>
              {{tiem.year}}平均分
              <span>{{tiem.average}}</span>
            </li>
          </ul>
        </div>
<<<<<<< HEAD
        <div class="Majorlist_button" @click="addList">点击更多</div>
=======
        <div class="Majorlist_button" @click="addList">
          
           点击更多
          
        </div>
>>>>>>> 314b442cce11d658746227581b0160373004c345
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RecruitStudents",
  data() {
    return {
      batch: "0",
      sytle: "0",
      tableData: "",
      year: "2018",
      pageSize: 10,
      majorList: ""
    };
  },
  methods: {
    handleDatch(command) {
      this.batch = command;
    },
    handleSytle(command) {
      this.sytle = command;
    },
    handleYear(command) {
      this.year = command;
    },
    getUniversity() {
      this.$ajax({
        method: "GET",
        url: "/api/university/admissionHistory/" + this.$route.params.userId,

        success: res => {
          if (res.data.code == 0) {
            this.tableData = res.data.data;
          }
        }
      });
    },
    gerMajorAdmissionHistory() {
      this.$ajax({
        method: "POST",
        url: "/api/university/majorAdmissionHistory",
        data: {
          batch: this.batch,
          schoolId: this.$route.params.userId,
          year: this.year,
          pageSize: this.pageSize,
          pageNow: 1
        },
        success: res => {
          if (res.data.code == 0) {
            this.majorList = res.data.data;
          }
        }
      });
    },
<<<<<<< HEAD
    addList() {
      this.pageSize += 10;
      this.gerMajorAdmissionHistory();
    }
=======
     addList(){
      
        this.pageSize += 10;
        this.gerMajorAdmissionHistory()
  }
>>>>>>> 314b442cce11d658746227581b0160373004c345
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.getUniversity();
      this.gerMajorAdmissionHistory();
    });
<<<<<<< HEAD
  }
=======
  },
 
>>>>>>> 314b442cce11d658746227581b0160373004c345
};
</script>
<style lang="scss">
.RecruitStudents {
  background: #fff;
  border-radius: 10px;
  padding: 40px 60px;
  margin-bottom: 50px;
  .Situation {
    padding-bottom: 46px;
    > h3 {
      display: flex;
      padding-bottom: 24px;
      font-size: 14px;
      div {
        background: #2e86ff;
        height: 16px;
        width: 6px;
        border-radius: 2px;
        margin-right: 14px;
        position: relative;
        top: -2px;
      }
    }
    .img {
      background: #4387f6;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      margin-right: 20px;
      img {
        width: 30px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
      }
    }
    .datas {
      > h3 {
        color: #424242;
        font-size: 16px;
        padding-bottom: 16px;
      }
      p {
        font-size: 12px;
        color: #919191;
        padding-bottom: 12px;
        span {
          color: #4387f6;
        }
      }
    }
    .Situations {
      display: flex;
      justify-content: space-between;
      .Situation_left {
        background: #f0f0f0;
        padding: 40px;
        width: 260px;
        display: flex;

        border-radius: 10px;
      }
      .Situation_right {
        background: #f0f0f0;
        padding: 40px;
        width: 260px;
        display: flex;

        border-radius: 10px;
      }
    }

    .school_tableData {
      padding: 20px;
      margin: 0 auto;
    }
  }
  .SituationDatas {
    > h3 {
      display: flex;
      padding-bottom: 24px;
      font-size: 14px;
      div {
        background: #2e86ff;
        height: 16px;
        width: 6px;
        border-radius: 2px;
        margin-right: 14px;
        position: relative;
        top: -2px;
      }
    }

    .Datas_Situation {
      .el-button-group {
        margin-right: 22px;
      }
      .el-button--primary {
        color: #818181;
        background: #f8f8f8;
        border-color: #f8f8f8;
        span {
          width: 78px;
        }
      }
      .el-dropdown .el-dropdown__caret-button::before {
        background: rgba(70, 220, 233, 0.5);
      }
      .el-dropdown .el-dropdown__caret-button:hover {
        border-left-color: rgba(70, 220, 233, 0.5);
        height: 100%;
      }
    }
    .Datas {
      width: 320px;
      > h3 {
        padding: 34px 0;
        text-align: right;
        color: #818181;
        font-size: 16px;
      }
      h4 {
        padding-left: 10px;
        color: #818181;
        font-size: 14px;
        padding-bottom: 10px;
      }
    }
    .Datas_Deatil {
      display: flex;

      align-items: flex-end;
      border-left: 2px solid #f7f7f7;
      border-bottom: 2px solid #f7f7f7;
      height: 150px;
      width: 320px;
      padding-left: 22px;

      .year {
        position: relative;
        margin-right: 42px;
        width: 24px;
        background: #82b6ff;
        height: 60px;
        span {
          color: #82b6ff;
          position: absolute;
          width: 52px;
          text-align: center;
          top: -20px;
          left: -10px;
          font-size: 12px;
        }
        p {
          color: #757575;
          font-size: 14px;
          position: absolute;
          bottom: -24px;
          left: -8px;
        }
      }
    }
  }
  .MajorSituation {
    margin-top: 80px;
    > h3 {
      display: flex;
      padding-bottom: 24px;
      font-size: 14px;
      div {
        background: #2e86ff;
        height: 16px;
        width: 6px;
        border-radius: 2px;
        margin-right: 14px;
        position: relative;
        top: -2px;
      }
    }
    .Datas_Situation {
      .el-button-group {
        margin-right: 22px;
      }
      .el-button--primary {
        color: #818181;
        background: #f8f8f8;
        border-color: #f8f8f8;
        span {
          width: 78px;
        }
      }
      .el-dropdown .el-dropdown__caret-button::before {
        background: rgba(70, 220, 233, 0.5);
      }
      .el-dropdown .el-dropdown__caret-button:hover {
        border-left-color: rgba(70, 220, 233, 0.5);
        height: 100%;
      }
    }
    .Majorlist {
      padding-top: 32px;
      .list {
        padding: 28px 46px;
        background: #f8f8f8;
        border-radius: 10px;
        margin-bottom: 10px;
        h3 {
          display: flex;
          justify-content: space-between;
          i {
            color: #d5d5d5;
            transform: rotate(-90deg);
          }
        }
        ul {
          display: flex;
          margin-top: 14px;

          li {
            padding-right: 48px;

            color: #888888;
            font-size: 12px;
            span {
              color: #414141;
            }
          }
        }
      }
    }
  }
<<<<<<< HEAD
  .Majorlist_button {
=======
  .Majorlist_button{
>>>>>>> 314b442cce11d658746227581b0160373004c345
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 0 auto;
    color: #888888;
    cursor: pointer;
  }
}
</style>